<route lang="yaml">
	meta:
	enabled: false
</route>

<script setup lang="ts">
	import 'element-plus/theme-chalk/display.css'
	import { onMounted, ref, watch } from 'vue'
	import type { TabsPaneContext } from 'element-plus'
	import moment from 'moment'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { useRoute } from 'vue-router'
	import useSettingsStore from '@/store/modules/settings'
	// import orderApi from '@/api/ttwq/order.ts'

	defineOptions({
		name: 'ComponentExampleLoading',
	})

	// import useSettingsStore from '@/store/modules/settings'
	// import shopApi from '@/api/modules/goodsorder/goodsorder'

	// 切换加载效果
	// import { loadingHide, loadingShow } from '@/components/SpinkitLoading/index'

	const route = useRoute()

	const data : any = ref({
		dataDetail: {
			order_code: '',
			all_money: '',
			reality_price: '',
			pay_type: '',
			status: null,
			real_name: '',
			phone: '',
			num: '',
			start_date: '',
			end_date: '',
			create_time: '',
			children: [{
				image: '1',
				name: '产品11',
				num: 1,
				price: 1280,
			}]
		},
		tabindex: 0,
		roominfo: [],
	})
	const bg : any = ref(false)
	const settingsStore : any = useSettingsStore()
	console.log(settingsStore.settings.app.colorScheme, '颜色主题')
	// watch(settingsStore.settings.app.colorScheme, (newVal, oldVal) => {
	//   console.log(newVal, '颜色改变')
	// })
	watch(() => settingsStore.settings.app.colorScheme, (val) => {
		console.log(settingsStore.settings.app.colorScheme, '主题')
		if (settingsStore.settings.app.colorScheme === 'dark') {
			bg.value = true
		}
		else {
			bg.value = false
		}
	})
	const baseurl : any = ref(`${import.meta.env.VITE_APP_API_BASEURLIMG}`)
	const nodata = new URL('@/assets/images/nodata.png', import.meta.url).href

	const leftSideWidth = ref(400)
	const formInline = reactive({

	})

	const type = ref('circle')
	const size = ref(50)
	const color = ref('#ffffff')
	function loading() {
		// 提供 3 个参数
		// loadingShow({
		//   type: type.value,
		//   size: size.value,
		//   color: color.value,
		// })
		// setTimeout(() => {
		//   loadingHide()
		// }, 500)
	}
	const number = ref('')
	watch(
		() => number.value, // 监听的数据源
		(newValue : any, oldValue : any) => {
			// console.log(`count 变化：${oldValue} -> ${newValue}`)
			const num = addHyphenToNumber(newValue)

			number.value = num.replace(/[^0-9\s]/g, '').replace(/(\d)\s+(?=\d)/g, '$1 ')
		},
	)
	function addHyphenToNumber(number : any) {
		const numberString = number.toString() // 将数字转换为字符串
		const regex = /(\d{4})(?=\d)/g
		const formattedNumber = numberString.replace(regex, `$1${' '}`)
		return formattedNumber
	}
	function getDetail() {
		loading()
		//  orderApi.order_selectInfo({
		//    str: number.value.replace(/\s/g, '').trim(),
		//  }).then((res: any) => {
		//   if(res.code===0){
		// 	if (res.data.gift_json) {
		// 		res.data.gift_json = JSON.parse(res.data.gift_json)
		// 	}
		// 	  data.value.dataDetail = res.data
		// 	  data.value.dataDetail.children = [res.data]
		// 	  console.log( data.value.dataDetail,' data.value.dataDetail')
		//   }else{
		// 	  data.value.dataDetail = {}
		//   }

		//  })
	}
	function checkNumber(num : any) {
		if (num % 2 === 0) {
			console.log(num + " 是双数");
			return 1
		} else {
			console.log(num + " 是单数");
			return 2
		}
	}
	function removedata() {
		data.value.dataDetail = {
			order_code: '',
			all_money: '',
			reality_price: '',
			pay_type: '',
			status: null,
			real_name: '',
			phone: '',
			id: 1,
			num: '',
			start_date: '',
			end_date: '',
			create_time: '',
			children: []
		}
		data.value.roominfo = []
	}
	const calNumber = ref('')
	const isInputChoose = ref(false)
	const activeName = ref('kefang')
	onMounted(() => {
		console.log(route.query.id === '1', '获取id')
		if (route.query.id === '1') {
			data.value.tabindex = '0'
			activeName.value = 'kefang'
		}
		else if (route.query.id === '2') {
			data.value.tabindex = '1'
			activeName.value = 'shangping'
		}
		else {
			data.value.tabindex = '0'
		}

		// console.log(data.value.dataDetail, ' data.value.dataDetail')
	})
	/* 切换菜单 */
	function handleClick(tab : TabsPaneContext, event : Event) {
		loading()
		data.value.dataDetail = {
			order_code: '',
			all_money: '',
			reality_price: '',
			pay_type: '',
			status: null,
			real_name: '',
			phone: '',
			num: '',
			start_date: '',
			end_date: '',
			create_time: '',
		}
		data.value.roominfo = []
		// console.log(tab.index, event)
		data.value.tabindex = tab.index
	}
	function x(value : any) {
		if (value !== 11 && value !== 12) {
			number.value = number.value + value
		}
		if (value === 11) {
			number.value = number.value.slice(0, -1)
		}
		if (value === 12) {
			calNumber.value = number.value
			isInputChoose.value = false
			number.value = ''
		}
	}
	function chage(e : any) {
		// const ipt = e
		// console.log(e)
		// if (ipt.length % 4 === 0) {
		//   `${number.value}-`
		// }
	}
	function zhikong() {
		data.value.dataDetail = {
			children: []
		}
	}

	function onHexiao() {
		ElMessageBox.confirm(
			'确认核销当前订单?',
			'提示',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			},
		)
			.then(() => {
				// orderApi.order_check({
				// 	id: data.value.dataDetail.id,
				// }).then((res : any) => {
				// 	if (res.code === 0) {
				// 		ElMessage({ message: '操作成功', type: 'success' })
				// 		getDetail()
				// 	}
				// })
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '已取消',
				})
			})
	}
</script>

<template>
	<div class="absolute-container">
		<div class="page-main">
			<LayoutContainer :left-side-width="leftSideWidth">
				<template #leftSide>
					<!-- <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="产品核销" name="kefang" />
              <el-tab-pane label="活动核销" name="shangping" />
            </el-tabs> -->
					<page-header title="输入核销码或订单号核销" content="" class="tc mt-8" />
					<el-form :inline="false" :model="formInline" size="large" class="writeoff">
						<el-form-item class="Input">
							<el-input v-model="number" placeholder="" clearable @input="chage" />
						</el-form-item>
						<el-form-item>
							<div class="flex justify-center items-center w-full">
								<el-button type="primary" @click="getDetail">
									查询
								</el-button>
							</div>
						</el-form-item>
					</el-form>
					<!-- <div> -->
					<div class="grid-container">
						<div class="grid-item">
							<button @click="x(1)">
								1
							</button>
						</div>
						<div class="grid-item">
							<button @click="x(2)">
								2
							</button>
						</div>
						<div class="grid-item">
							<button @click="x(3)">
								3
							</button>
						</div>
						<div class="grid-item">
							<button @click="x(4)">
								4
							</button>
						</div>
						<div class="grid-item">
							<button @click="x(5)">
								5
							</button>
						</div>
						<div class="grid-item">
							<button @click="x(6)">
								6
							</button>
						</div>
						<div class="grid-item">
							<button @click="x(7)">
								7
							</button>
						</div>
						<div class="grid-item">
							<button @click="x(8)">
								8
							</button>
						</div>
						<div class="grid-item">
							<button @click="x(9)">
								9
							</button>
						</div>
						<div class="grid-item">
							<button @click="x(10)">
								0
							</button>
						</div>
						<div class="grid-item">
							<button @click="x(11)">
								清除
							</button>
						</div>
						<div class="grid-item">
							<button @click="getDetail">
								确认
							</button>
						</div>
					</div>
				</template>
				<div v-if="data.dataDetail.id" class="container">
					<!-- <div> -->
					<el-row style="height: calc(100% - 80px);padding-top: 10px;">
						<el-col :xs="1" :sm="1" :md="1" :lg="4" hidden-md-and-down />
						<el-col :xs="22" :sm="22" :md="22" :lg="16">
							<el-card shadow="hover" class="grid-content pr-6">
								<div class="title">
									订单信息
								</div>
								<div class="order_status">
									<span class="f18"> 已支付</span>
								</div>
								<!-- <div class="order_status warning">
                    <span class="f18">未核销</span>
                  </div> -->
								<el-row :gutter="15">
									<el-col :sm="12">
										<div class="pb-4">
											<span class="gray9">订单编号：</span>
											{{ data.dataDetail.order_code }}
										</div>
									</el-col>
									<!-- <el-col :sm="12">
                      <div class="pb16">
                        <span class="gray9">订单类型：</span>
                        <el-tag type="success">
                          {{ data.tabindex === '0' ? '产品订单' : '活动订单' }}
                        </el-tag>
                      </div>
                    </el-col> -->
									<!-- <el-col :sm="12">
                        <div class="pb16">
                          <span class="gray9">下单时间：</span>
                          {{ data.dataDetail.create_time }}
                        </div>
                      </el-col> -->
									<!-- <el-col :sm="12">
                      <div class="pb16">
                        <span class="gray9">订单金额 (元)：</span>
                        ￥{{ data.dataDetail.all_money / 100 }}
                      </div>
                    </el-col> -->
									<!-- <el-col :sm="12">
                        <div class="pb16">
                          <span class="gray9">积分抵扣 (元)：</span>
                          ￥10
                        </div>
                      </el-col> -->

									<el-col :sm="12">
										<div class="pb-4">
											<span class="gray9">实付金额 (元)：</span>
											￥{{ data.dataDetail.reality_price / 100 }}
										</div>
									</el-col>
									<el-col :sm="12">
										<div class="pb-4">
											<span class="gray9">支付方式：</span>
											<!-- {{ data.dataDetail.pay_type === 1 ? '微信支付' : '余额支付' }} -->
											微信支付
										</div>
									</el-col>
									<el-col :sm="12">
										<div class="pb-4">
											<span class="gray9">付款时间：</span>
											{{data.dataDetail.pay_time>0? moment(data.dataDetail.pay_time * 1000).format('YYYY-MM-DD HH:mm:ss'):'-' }}
										</div>
									</el-col>
								</el-row>

							</el-card>
							<!--  -->
							<el-card shadow="hover" class="grid-content">
								<div class="title">
									下单人信息
								</div>
								<el-row :gutter="15">
									<el-col :sm="12">
										<div class="pb-4">
											<span class="gray9">姓名： </span>
											{{data.dataDetail.applet_user_info&&data.dataDetail.applet_user_info.nick_name?data.dataDetail.applet_user_info.nick_name:''}}
										</div>
									</el-col>
									<el-col :sm="12">
										<div class="pb-4">
											<span class="gray9">电话： </span>
											{{data.dataDetail.applet_user_info&&data.dataDetail.applet_user_info.phone?data.dataDetail.applet_user_info.phone:''}}
										</div>
									</el-col>
									<el-col :sm="12">
										<div class="pb-4">
											<span class="gray9">下单时间：</span>
											{{data.dataDetail.create_time>0? moment(data.dataDetail.create_time * 1000).format('YYYY-MM-DD HH:mm:ss'):'' }}
										</div>
									</el-col>
								</el-row>
							</el-card>
							<el-card shadow="hover" class="grid-content">
								<div class="title">
									产品信息
								</div>
								<el-table v-if="data.dataDetail.children" :data="data.dataDetail.children"
									highlight-current-row border height="100%">
									<el-table-column label="产品图片" width="90" align="center">
										<template #default="scope">
											<image-preview :src="scope.row.image" :width="52" :height="52" />
										</template>
									</el-table-column>
									<el-table-column label="产品名称" min-width="240">
										<template #default="scope">
											<div class="name">
												{{ scope.row.name }}
											</div>
											<!-- <div class="gray6 f14 mt-1.5 text-ellipsis">
			         	赠品：<span v-if="scope.row.gift_json && scope.row.gift_json.length>0"><span
			         			v-for="(it,jt) in scope.row.gift_json"
			         			:key="jt">{{it.gift_info?it.gift_info.name:''}}</span></span><span
			         		v-else>无赠品</span>
			         </div> -->
											<div class="readxing flex cursor-pointer items-center">
												<div class="mr-4">
													门店：{{scope.row.shop_info?scope.row.shop_info.name:'未绑定门店'}}
												</div>

											</div>
										</template>
									</el-table-column>
									<el-table-column label="数量" width="88" align="center">
										<template #default="scope">
											<p>x {{ scope.row.num }}</p>
										</template>
									</el-table-column>
									<el-table-column label="金额" width="88" align="center">
										<template #default="scope">
											<p>￥ {{ (scope.row.price * scope.row.num) / 100 }}</p>
										</template>
									</el-table-column>
									<el-table-column label="状态" width="100" align="center">
										<template #default="scope">
											<span> {{scope.row.is_pay===0?'未支付':'已支付'}}</span>
										</template>
									</el-table-column>
								</el-table>
							</el-card>
							<el-card shadow="hover" class="grid-content">
								<div class="title">
									赠品信息
								</div>
								<div class=" flex items-center">
									赠品：<div v-if="data.dataDetail.gift_json&&data.dataDetail.gift_json.length>0">
										<div v-for="(i,j) in data.dataDetail.gift_json" :key="j">
											{{i.gift_info?i.gift_info.name:''}}
										</div>
									</div>
									<div v-else>无赠品</div>
								</div>
							</el-card>
							<el-card shadow="hover" class="grid-content" v-if="data.dataDetail.status===2">
								<div class="title">
									核销信息
								</div>
								<el-row :gutter="15">
									<el-col :sm="12">
										<div class="pb-4">
											<span class="gray9">核销类型： </span>
											{{data.dataDetail.check_type===1?'后台核销':'小程序核销'}}
										</div>
									</el-col>
									<el-col :sm="12">
										<div class="pb-4">
											<span class="gray9">核销人： </span>
											{{data.dataDetail.check_type===1&&data.dataDetail.check_user_info && data.dataDetail.check_user_info.realname?data.dataDetail.check_user_info.realname:data.dataDetail.check_type===2?data.dataDetail.check_staff_name+` (${data.dataDetail.check_user_info.phone?data.dataDetail.check_user_info.phone:''})`:''}}
										</div>
									</el-col>
									<!-- <el-col :sm="12" v-if="data.dataDetail.check_type===2">
			        <div class="pb-4">
			          <span class="gray9">核销人电话： </span>
			         {{data.dataDetail.check_user_info && data.dataDetail.check_user_info.nick_name?data.dataDetail.check_user_info.nick_name:''}}
			        </div>
			      </el-col> -->
									<el-col :sm="12" v-if="data.dataDetail.check_type===2">
										<div class="pb-4">
											<span class="gray9">核销门店： </span>
											{{data.dataDetail.shop_info && data.dataDetail.shop_info.name?data.dataDetail.shop_info.name:''}}
										</div>
									</el-col>
									<el-col :sm="12">
										<div class="pb-4">
											<span class="gray9">核销时间：</span>
											{{data.dataDetail.check_time>0? moment(data.dataDetail.check_time * 1000).format('YYYY-MM-DD HH:mm:ss'):'-' }}
										</div>
									</el-col>
								</el-row>
							</el-card>
						</el-col>
						<el-col :xs="1" :sm="1" :md="1" :lg="4" hidden-md-and-down />
					</el-row>

					<div class="bottom-action" v-if="data.dataDetail.status===1 || data.dataDetail.status===6">
						<el-button type="primary" size="large" @click="onHexiao">
							确定核销
						</el-button>
					</div>
					<!-- </div> -->
				</div>
				<div v-else class="d-c-c" style="height: 100%;">
					<div class="tc pr">
						<div v-if="bg" class="bg pa" />
						<img :src="nodata" class="nodata">
						<div class="f20 flex items-center justify-center" style="margin-top: -10px;">
							暂无查询订单
						</div>
					</div>
				</div>
			</LayoutContainer>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.absolute-container {
		position: absolute;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;

		:deep(.left-side) {
			position: relative;
		}
	}

	.biao {
		top: 0;
		left: 0;
		padding: 4px 10px;
		background: #42b983;
		border-radius: 0 0 50%;
	}

	.biao>img {
		width: 36px;
		height: 36px;
	}

	.el-form.writeoff {
		width: 96%;
		margin: 10% auto 0;

		:deep(.el-form-item__content) {
			display: block;
		}

		:deep(.el-input--large .el-input__inner) {
			height: 56px;
			font-size: 40px;
			font-weight: bold;
			line-height: 56px;
			color: var(--el-text-color-regular);
			text-align: center;
		}

		:deep(.el-input--large .el-input__inner::placeholder) {
			margin-bottom: 10px;
			font-size: 20px;
			font-weight: normal;
		}

		.el-button--large {
			height: 50px;
			padding: 0 36px;
			font-size: 24px;
			font-weight: bold;
		}
	}

	.grid-container {
		display: grid;
		grid-template-rows: repeat(4, 32%);
		grid-template-columns: repeat(3, 30%);
		grid-gap: 14px;
		width: 90%;
		margin: 20% auto 0;
	}

	.grid-item {
		width: 100%;
		/* 按钮宽度填满网格 */
		height: 100%;
		/* 按钮高度填满网格 */
		color: var(--el-text-color-regular);
		/* 白色字体 */
		background-color: transparent;
		/* 无背景色 */
		border: 1px solid var(--el-border-color);
		/* 白色边框 */
		border-radius: 10px;
		/* 圆角矩形 */
	}

	.grid-item button {
		width: 100%;
		height: 100%;
		font-size: 30px;
		font-weight: bold;
		color: var(--el-text-color-regular);
		background-color: var(--g-main-bg);
		border: none;
		border-radius: 10px;
		/* 圆角矩形 */
		transition: background-color 0.3s;
	}

	.grid-item button:active {
		background-color: #c9c9c9;
	}

	.container {
		position: relative;
		height: 100%;
	}

	.el-card.grid-content {
		position: relative;
		margin-bottom: 20px;
		font-size: 14px;
		border: none;
		box-shadow: 0 0 4px rgb(0 0 0 / 10%);
		transition: all 0.3s ease;

		.title {
			position: relative;
			height: 40px;
			padding-left: 14px;
			margin-bottom: 10px;
			font-size: 18px;
			line-height: 40px;
		}

		.title::before {
			position: absolute;
			top: 50%;
			left: 0;
			width: 4px;
			height: 20px;
			content: "";
			background: #475ddb;
			border-radius: 4px;
			transform: translateY(-50%);
		}
	}

	.order_status {
		position: absolute;
		top: 0;
		right: -16px;
		padding: 10px 30px 10px 20px;
		background-color: #42b983;
		border-radius: 10px;
		transform: skewX(30deg);
	}

	.order_status.warning {
		background-color: #fa830d;
	}

	.order_status>span {
		display: block;
		color: #fff;
		transform: skewX(-30deg);
	}

	.bottom-action {
		position: absolute;
		bottom: -15px;
		left: 0;
		z-index: 4;
		width: calc(100% + 30px);
		padding: 20px;
		margin: 0 -15px;
		text-align: center;
		background-color: var(--g-app-bg);
		// border-top: 1px solid var(--el-border);
		box-shadow: 0 0 2px 0 var(--g-box-shadow-color);
		transition: all 0.3s, var(--el-transition-box-shadow);
	}

	.bg {
		inset: 0;
		background-color: rgb(44 62 80 / 25%);
	}
</style>